<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>div的堂哥</span>
    <div class="test" id="box">
        hello
        <p>你好</p>
        world
        <p>千锋</p>
        <!-- 我是注释 -->
    </div>
    <span>div的堂弟</span>
    <script>
        //获取节点

        // 获取元素节点 

            // 非常规元素 html body head 
            // html document.documentElement
            // body document.body
            // head document.head

        // 常规元素的获取 
            // id  getElementById()
            // class  getElementsByClassName()
            // tag   getElementsByTagName()
            // name  getElementsByName()
            // 选择器  querySelector();
            // 选择器  querySelectorAll();

        // 文本 属性  注释   下面的方法 包含单不限元素节点  
        // 1 childNodes
        // 2 children
        // 3 firstChild
        // 4 lastChild
        // 5.firstElementChild
        // 6.lastElementChild
        // 7.previousSibling 
        // 8.previousElementSibling
        // 9.nextSibling
        // 10.nextElementSibling
        // 11 parentNode
        // 12.parentElement
        // 13 attributes

/* 

        // 1 childNodes
        // 语法: 节点.childNodes
        // 返回值: 伪数组 包含该节点所有的子一级节点

        // 2 children
        // 语法: 节点.children
        // 返回值: 伪数组 包含该节点所有的子一级元素节点
        // 3 firstChild
        // 语法: 节点.firstChild
        // 返回值: 节点的第一个子节点
        // 4 lastChild
        // 语法: 节点.lastChild
        // 返回值: 节点的最后一个子节点
        // 5.firstElementChild
        // 语法: 节点.firstElementChild
        // 返回值: 节点的第一个子元素节点
        // 6.lastElementChild
        // 语法: 节点.lastElementChild
        // 返回值: 节点的最后一个子元素节点
        // 7.previousSibling   堂哥  同一个辈分 
         // 语法: 节点.previousSibling
        // 返回值: 节点的上一个兄弟节点
        // 8.previousElementSibling
        // 语法: 节点.previousElementSibling
        // 返回值: 节点的上一个兄弟元素节点
        // 9.nextSibling   同一个辈分 堂弟 
        // 语法: 节点.nextSibling
        // 返回值: 节点的下一个兄弟节点
        // 10.nextElementSibling
        // 语法: 节点.nextElementSibling
        // 返回值: 节点的下一个兄弟元素节点
        // 11 parentNode
        // 语法: 节点.parentNode
        // 返回值: 节点的父节点 
        // 12.parentElement
        // 语法: 节点.parentNode
        // 返回值: 节点的父元素节点 
        // 13 attributes
         // 语法: 节点.attributes
        // 返回值: 节点的所有属性节点 








*/

        var divEle = document.getElementsByTagName('div')[0];
        // 1 .childnodes 
        // console.log(divEle.childNodes,divEle.childNodes.length); // 7 
        // 2.children
        // console.log(divEle.children,divEle.children.length);// 2
        //3.firstChild
        // console.log(divEle.firstChild); // 非元素节点 
        //4.firstElementChild
        // console.log(divEle.firstElementChild);// <p>你好</p>
        //5.lastChild
        // console.log(divEle.lastChild); // #text 
        // #text 说明这个节点是文本节点  空格换行都算
        //6.lastElementChild
        // console.log(divEle.lastElementChild); // <p>千锋</p>
        

        //7.previousSibling
        // console.log(divEle.previousSibling); // #text 
        // // divEle 前面有空格和换行
        // console.log(divEle.previousElementSibling); // <span>div的堂哥</span>


          //8.previousSibling
        // console.log(divEle.nextSibling); // #text 
        // // // divEle 后面有空格和换行
        // console.log(divEle.nextElementSibling); // <span>div的堂弟</span>

        //parentNode
        // parentElement
        // 标签支持嵌套

        // ../../../
        // ./

        // 'C:\\www\\2202'

        // 'C:/www/2202'
        // console.log(divEle.parentNode);
        // console.log(divEle.parentNode.parentNode);
        // console.log(divEle.parentNode.parentNode.parentNode);


        // console.log(divEle.parentElement);
        // console.log(divEle.parentElement.parentElement);
        // console.log(divEle.parentElement.parentElement.parentElement);



        console.log(divEle.attributes);

    </script>
</body>
</html>